<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>重复发送请求</title>
  </head>
  <body>
    <!--
            重复发送请求可能导致性能问题
            可以设置防抖和节流 也 可以进行发送请求时的判断
    -->

    <button id="btn">发送请求</button>
    <script>
        const btn = document.getElementById('btn')
        let xhr = null
        let isSending = false
        btn.addEventListener('click',function(){ 
            //  注意：你取消的xhr一定是同一个xhr ,否则你将不能取消，所以xhr的定义我放在了外面
            if(isSending)  xhr.abort()
            xhr = new XMLHttpRequest()
            isSending = true
            xhr.open('GET','http://localhost:8000/delay')
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    // 请求发送完毕后，将状态改成false
                    isSending = false
                }
            }
        })  

    </script>

</body>
</html>
